<!--
 * @Date: 2025-07-03 10:47:57
 * @LastEditTime: 2025-07-07 14:11:41
-->
<template>
  <div class="overview-wrapper">
   
    <!-- 基础信息 -->
    <Card title="基础信息">
      
      <Row style="margin-bottom: 20px;">
        <Col :span="6">数据库类型：{{baseInfo.dbType}}</Col>
        <Col :span="6">数据库版本：{{baseInfo.dbVersion}}</Col>
        <Col :span="6">IP&端口 {{baseInfo.address}}</Col>
        <Col :span="6">DBID：{{baseInfo.dbId}}</Col>
      </Row>
      <Row style="margin-bottom: 20px;">
        <Col :span="6">INSTANCE_NAME: {{baseInfo.instanceName}}</Col>
        <Col :span="6">SERVICE_NAME: {{baseInfo.flowName}}</Col>
        <Col :span="6">SGA/MAX_SGA: {{baseInfo.sga}}</Col>
        <Col :span="6">数据库字符集：{{baseInfo.lanager}}</Col>
      </Row>
      <Row >
        <Col :span="6">归档模式：{{baseInfo.arc}}</Col>
      </Row>
    </Card>

    <!-- 数据库对象分布 柱状图 -->
    <Card title="数据库对象分布" style="margin-top:20px">
      <div ref="chartRef" style="width: 100%; height: 300px;"></div>
    </Card>

    <!-- 用户对象分布 表格 -->
    <Card title="用户对象分布" style="margin-top:20px">
      <template #extra><Button type="primary" @click="showDetails">查看详情</Button></template>
      <Input.Search v-model:value="owner" placeholder="请输入用户名" @search="onSearch" style="width: 200px; margin-bottom: 10px;" />
      <Table
        :columns="columns"
        :data-source="userStats"
        :pagination="pagination"
        row-key="username"
        size="small"
        bordered
      />
    </Card>

    <!-- 详情 -->
    <tableDetails ref="tableDetailsRef" :baseInfo="baseInfo"/>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import * as echarts from 'echarts'
import { Row, Col ,Card,Button,Table,Input} from 'ant-design-vue'
import tableDetails from './tableDetails.vue'
import * as http from '@/api/flow/createTask';
import store from "@/store";
const tableDetailsRef = ref(null)
const chartRef = ref(null)
let chartInstance = null
const baseInfo = ref({})
const objectStats = ref([
  { type: 'TABLE', value: 1683 },
  { type: 'TYPE', value: 849 },
  { type: 'INDEX', value: 254 },
  { type: 'VIEW', value: 406 },
  { type: 'FUNCATION', value: 324 },
  { type: 'TRIGGER', value: 484 },
  { type: 'FUNCTION', value: 351 }
])

const renderChart = () => {
  if (!chartRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value)
  }
  chartInstance.setOption({
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, bottom: 40, top: 40 },
    xAxis: {
      type: 'category',
      data: objectStats.value.map(item => item.type),
      axisTick: { alignWithLabel: true }
    },
    yAxis: { type: 'value' },
    series: [
      {
        type: 'bar',
        data: objectStats.value.map(item => item.value),
        itemStyle: { color: '#4689F5' },
        label: { show: true, position: 'top' }
      }
    ]
  })
}

onMounted(() => {
  
  window.addEventListener('resize', resizeChart)
  objectMessageView()
  objectBarView()
  objectTableView()
  console.log(store.state.taskInfo.flowId, "store.state.flowId");
})
onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', resizeChart)
})
function resizeChart() {
  chartInstance?.resize()
}
watch(objectStats, renderChart, { deep: true })

// 其余表格和基础信息同你原有代码
const userStats = ref([
  { username: 'AMDT', TABLE: 37, INDEX: 75, LOBSEGMENT: 9, VIEW: 0, TRIGGER: 0, TYPE: 0, TABLE_PARTITION: 0, SEQUENCE: 0, MATERIALIZED_VIEW: 0 },
  // ... 其余数据
])
const columns = ref([])
const owner = ref('')
const pagination = ref({ pageSize: 10, current: 1, total: userStats.value.length })
const onSearch = () => {
  pagination.value.current = 1
  // 这里可以加筛选逻辑
  objectTableView()
}

const showDetails = () => {
  tableDetailsRef.value.openDrawer()
}
// 获取基础信息
const objectMessageView = async () => {
  let params = {
    flowId: store.state.taskInfo.flowId
  }
  let res = await http.objectMessageView(params)
  try{
    if(res.code === '000000'){
    baseInfo.value = res.data;
    store.commit('setFlowBaseInfo',res.data)
    }
  }catch(err){
    console.log(err, "err");
  }
}
// 获取数据库对象分布
const objectBarView = async () => {
  let params = {
    flowId: store.state.taskInfo.flowId
  }
  let res = await http.objectBarView(params)
  renderChart()
  console.log(res, "res");
}
// 获取用户对象分布
const objectTableView = async () => {
  let params = {
    flowId: store.state.taskInfo.flowId,
    owner:owner.value,
    limit:pagination.value.pageSize,
    offset:pagination.value.current
  }
  let res = await http.objectTableView(params)
  try{
    if(res.code === '000000'){
      const rawData = res.data;
      const allKeys = Array.from(
        new Set(
          rawData.flatMap(item => Object.keys(item).filter(key => key !== 'owner'))
        )
      );
      const normalizedData = rawData.map(item => {
          const result = { owner: item.owner };
          allKeys.forEach(key => {
            result[key] = item[key] !== undefined ? item[key] : "0";
          });
          return result;
        });
        columns.value = [
          { title: 'owner', dataIndex: 'owner', key: 'owner' },
          ...allKeys.map(key => ({
            title: key,
            dataIndex: key,
            key: key
          }))
        ];
      userStats.value = normalizedData;
    }
  }catch(err){
    console.log(err, "err");
  }
}

</script>

<style scoped lang="scss">
.overview-wrapper {
  padding: 16px;
  .base-info {
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    .info-row {
      display: flex;
      gap: 32px;
      margin-bottom: 8px;
      font-size: 14px;
      color: #333;
    }
  }
  .chart-card, .table-card {
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
  }
}
</style>